<!--工资条界面-->

<template>
  <div style="height:6vh;padding:10px 20px;background-color: #a0eee1;text-align: center">
    <span style="line-height: 60px;font-size:20px;">工资条列表</span>

  </div>

  <!--工资搜索卡片-->
  <el-card>
<!--    根据姓名查询 -->
    <el-form :inline="true">
      <el-from-item label="关键字搜索">
       关键字搜索: <el-input placeholder="请输入姓名/手机号查询"
                  style="width: 200px;"
                  v-model="searchSalaryForm.name"
                  @keydown.enter="loadSalary"/>
      </el-from-item>
<!--&lt;!&ndash;      根据工号查询 &ndash;&gt;-->
<!--      <el-from-item label="根据工号工资查询">-->
<!--        工号:<el-input placeholder="请输入工号查询"-->
<!--                  style="width: 200px;"-->
<!--                  v-model="searchSalaryForm.staffId"-->
<!--                  @keydown.enter="loadSalary"/>-->
<!--      </el-from-item>-->

<!--     根据年月查询-->
      <el-from-item label="根据年月工资查询" style="margin-left: 10px;">
        年月:<el-date-picker
            v-model="searchSalaryForm.month"
            type="month"
            placeholder="请选择月份"
            value-format="YYYY-MM"
            @change="loadSalary"
        />
      </el-from-item>


<!--查询按钮   -->
      <el-from-item style="margin-left: 20px;">
        <el-button :icon="Search" size="large" box type="primary" @click="loadSalary" />
        <el-button  size="large" @click="resetSearch">重置</el-button>
      </el-from-item>

<!--导出-->
      <!-- 导出按钮 -->
      <el-button style="background-color: #062d50;color: #fff;position: absolute;right: 20px" @click="exportExcelSelect">
        <el-icon>
          <Download />
        </el-icon>
        <span>导出</span>
      </el-button>

<!--导入-->


    </el-form>
  </el-card>

<!--  工资条数据表格卡片-->
<el-card style="margin: 20px">
  <el-table :data="salaryArr" style="width:100%;" @selection-change="handleSelectionChange" >
    <el-table-column  type="selection" width="80"  />
    <el-table-column label="编号" prop="id" width="80" align="center"/>
    <el-table-column label="月份" prop="month" align="center"/>
    <el-table-column label="姓名" prop="name" align="center"/>
    <el-table-column label="手机号" prop="phone" width="80" align="center"/>
    <el-table-column label="基本工资" prop="basicSalary" align="center"/>
    <el-table-column label="失业保险" prop="unemploymentBenefits" align="center"/>
    <el-table-column label="医疗保险" prop="medicalInsurance" align="center"/>
    <el-table-column label="养老保险" prop="oldAgePension" align="center"/>
    <el-table-column label="公积金" prop="accumulationFund" align="center"/>
    <el-table-column label="个人所得税" prop="individualIncomeTax" align="center"/>
    <el-table-column label="奖金" prop="bonus" align="center"/>
    <el-table-column label="补贴" prop="subsidy" align="center"/>
    <el-table-column label="扣除" prop="deduction" align="center"/>
    <el-table-column label="工资总额" prop="totalSalary" align="center"/>

    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" size="default" icon="el-icon-view"
                  @click="ViewDetails">查看详情</el-button>
      </template>


    </el-table-column>




    </el-table>
  </el-card>

<!--  查看工资表详情界面-->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
    <el-table :date="salaryList" style="width:100%;" @selection-change="handleChange">
      <el-table-column label="编号" prop="id" width="80" align="center"/>
      <el-table-column label="月份" prop="month" align="center"/>
      <el-table-column label="姓名" prop="name" align="center"/>
      <el-table-column label="手机号" prop="phone" width="80" align="center"/>
      <el-table-column label="基本工资" prop="basicSalary" align="center"/>
      <el-table-column label="失业保险" prop="unemploymentBenefits" align="center"/>
      <el-table-column label="医疗保险" prop="medicalInsurance" align="center"/>
      <el-table-column label="养老保险" prop="oldAgePension" align="center"/>
      <el-table-column label="公积金" prop="accumulationFund" align="center"/>
      <el-table-column label="个人所得税" prop="individualIncomeTax" align="center"/>
      <el-table-column label="工资总额" prop="totalSalary" align="center"/>
      <el-table-column label="奖金" prop="bonus" align="center"/>
      <el-table-column label="补贴" prop="subsidy" align="center"/>
      <el-table-column label="扣除" prop="deduction" align="center"/>
      <el-table-column label="创建时间" prop="createTime" align="center"/>
      <el-table-column label="更新时间" prop="updateTime" align="center"/>



    </el-table>
  </el-dialog>




  <!-- 导出资产单列表弹窗 -->
  <el-dialog title="导出资产信息为excel表格--数据预览" v-model="dialogExcelVisible"
             :before-close="exportClose" width="80%">
    <el-table :data="selectData" id="selectTable" >
      <el-table-column label="月份" prop="month" align="center"/>
      <el-table-column label="姓名" prop="name" align="center"/>
      <el-table-column label="手机号" prop="phone" width="80" align="center"/>
      <el-table-column label="基本工资" prop="basicSalary" align="center"/>
      <el-table-column label="失业保险" prop="unemploymentBenefits" align="center"/>
      <el-table-column label="医疗保险" prop="medicalInsurance" align="center"/>
      <el-table-column label="养老保险" prop="oldAgePension" align="center"/>
      <el-table-column label="公积金" prop="accumulationFund" align="center"/>
      <el-table-column label="个人所得税" prop="individualIncomeTax" align="center"/>
      <el-table-column label="奖金" prop="bonus" align="center"/>
      <el-table-column label="补贴" prop="subsidy" align="center"/>
      <el-table-column label="扣除" prop="deduction" align="center"/>
      <el-table-column label="工资总额" prop="totalSalary" align="center"/>
    </el-table>
    <template #footer>
      <el-button @click="exportClose">取 消</el-button>
      <el-button type="primary" @click="exportExcel">确 定 导 出</el-button>
    </template>
  </el-dialog>



</template>

<script setup>
import {onMounted,  ref} from "vue";
import {ElMessage} from "element-plus";
import {Download, Search} from "@element-plus/icons-vue";
import qs from "qs";
import axios from "axios";
import htmlToExcel from "@/utils/htmlToExcel";



//定义对象用来保存工资搜索条件 名字 工号  月份
const searchSalaryForm = ref({});

//定义搜索卡片重置按钮
const resetSearch = () => {
  searchSalaryForm.value = {};
  loadSalary();
};

//定义数组来保存工资数据
const salaryArr = ref([]);

//定义加载工资数据
const loadSalary = () => {
  let data = qs.stringify(searchSalaryForm.value );
  axios.get('http://localhost:8095/v1/salary/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      salaryArr.value = response.data.data;
      console.log(salaryArr.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
};

//页面一加载完毕,立即执行
onMounted(()=>{
  loadSalary();
})
















// 查看详情按钮
const ViewDetails = () => {
  dialogVisible.value = true;
  dialogTitle.value = '查看工资表详情';
};
// 查看详情弹框
const dialogVisible = ref(false);
// 弹框标题
const dialogTitle = ref('工资详情');

//工资列表
const salaryList = ref([]);

const handleChange=(val)=>{
  salaryList.value=val;
};







//导出
const selectData=ref([]);
//控制导出数据弹窗
const dialogExcelVisible=ref(false);
//关闭导出资产弹窗的方法
const exportClose = () => {
  if (confirm('是否要关闭本弹窗？')) {
    dialogExcelVisible.value=false;
  }
};
//点击<确定导出>按钮触发的方法
const exportExcel=()=>{
  htmlToExcel.getExcel('#selectTable','导出的自定义标题');
  dialogExcelVisible.value=false;  //点击确认导出后，关闭导出的弹窗
};
//点击搜索栏的<导出>按钮触发的方法
const exportExcelSelect=()=>{
  if (selectData.value.length<1){
    ElMessage.warning('请选择要导出的内容！');
    return false;
  }
  dialogExcelVisible.value=true;
};
const handleSelectionChange=(val)=>{
  selectData.value=val;
};






</script>



<style scoped>

</style>